<template>
	<view class="content">
		
		<view class="list">
			<view class="input-item">
				<text class="tit">手机号码</text>
				<input 
					type="number" 
					v-model="phoneNumber" 
					placeholder="请输入手机号码"
					maxlength="11"
					data-key="phoneNumber"
					disabled="true"
					@input="inputChange"
				/>
			</view>
			</view>
			<!-- <view class="list-call">
				<image class="img" src="/static/shilu-login/1.png"></image>
				<input class="biaoti" type="number" v-model="phoneNumber" maxlength="11" placeholder="请输入新手机号" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/3.png"></image>
				<input class="biaoti" type="number" v-model="verifyCode" maxlength="4" placeholder="验证码" />
				<view class="yzm" :class="{ yzms: second>0 }" @tap="getverifyCode">{{yanzhengma}}</view>
			</view> -->
		
		<!-- <view class="dlbutton" hover-class="dlbutton-hover" @tap="bindLogin()">
			<text>提交</text>
		</view> -->

	</view>
</template>

<script>
	var _this,js;
	export default {
		data() {
			return {
				phoneNumber:'17865654365',
				verifyCode:"",
				second:0,
			}
		},
		onLoad(){
			_this = this;
		},
		computed:{
			yanzhengma(){
				if(this.second==0){
					return '获取验证码';
				}else{
					if(this.second<10){
						return '重新获取0'+this.second;
					}else{
						return '重新获取'+this.second;
					}
				}
			}
		},
		methods: {
			getverifyCode(){
				if(this.second>0){
					return;
				}
				
				_this.second = 60;
				js = setInterval(function(){
					_this.second--;
					if(_this.second==0){
						clearInterval(js)
					}
				},1000)
				
				// uni.request({
				//     url: 'http://***/getverifyCode.html', //仅为示例，并非真实接口地址。
				//     data: {phoneNumber:this.phoneNumber,verifyCode_type:'reg'},
				// 	method: 'POST',
				// 	dataType:'json',
				//     success: (res) => {
				// 		if(res.data.verifyCode!=200){
				// 			uni.showToast({title:res.data.msg,icon:'none'});
				// 			tha.second = 0;
				// 		}else{
				// 			uni.showToast({title:res.data.msg});
				// 			
				// 		}
				//     }
				// });
			},
			bindLogin() {
				var rule = [
				    {name:"phoneNumber", checkType : "phoneno",  errorMsg:"请输入正确手机号"},
					{name:"verifyCode", checkType : "string",checkRule:"1,",  errorMsg:"请输入验证码"},
				];
				let checkData = {'phoneNumber':_this.phoneNumber,'verifyCode':_this.verifyCode}
				var checkRes = _this.$graceChecker.check(checkData,rule)
				// console.log(checkRes)
				// console.log(_this.$graceChecker)
				if(!checkRes){
					 uni.showToast({
					    icon: 'none',
					    title: _this.$graceChecker.error
					});
					return;
				}
				
				
				// uni.request({
				//     url: 'http://***/forget.html',
				//     data: {
				// 		phoneNumber:this.phoneNumber,
				// 		password:this.password,
				// 		verifyCode:this.verifyCode
				// 	},
				// 	method: 'POST',
				// 	dataType:'json',
				//     success: (res) => {
				// 		if(res.data.verifyCode!=200){
				// 			uni.showToast({title:res.data.msg,icon:'none'});
				// 		}else{
				// 			uni.showToast({title:res.data.msg});
				// 			setTimeout(function(){
				// 				uni.navigateBack();
				// 			},1500) 
				// 		}
				//     }
				// });
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.tishi {
		color: #999999;
		font-size: 28upx;
		line-height: 50upx;
		margin-bottom: 50upx;
	}
    .list {
    	display: flex;
    	flex-direction: column;
    	padding-top: 50upx;
    	padding-left: 70upx;
    	padding-right: 70upx;
    }
    .list-call{
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    	align-items: center;
    	height: 100upx;
    	color: #333333;
    	border-bottom: 1upx solid rgba(230,230,230,1);
    }
    .list-call .img{
    	width: 40upx;
    	height: 40upx;
    }
    .list-call .biaoti{
    	flex: 1;
    	text-align: left;
    	font-size: 32upx;
    	line-height: 100upx;
    	margin-left: 16upx;
    }
	.dlbutton {
		color: #FFFFFF;
		font-size: 34upx;
		width:470upx;
		height:100upx;
		background:linear-gradient(-90deg,rgba(63,205,235,1),rgba(188,226,158,1));
		box-shadow:0upx 0upx 13upx 0upx rgba(164,217,228,0.2);
		border-radius:50upx;
		line-height: 100upx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100upx;
	}
	.yzm {
		color: #FF7D13;
		font-size: 24upx;
		line-height: 64upx;
		padding-left: 10upx;
		padding-right: 10upx;
		width:auto;
		height:64upx;
		border:1upx solid rgba(255,131,30,1);
		border-radius: 50upx;
	}
	.yzms {
		color: #999999 !important;
		border:1upx solid #999999;
	}
	.dlbutton {
		color: #FFFFFF;
		font-size: 34upx;
		width:470upx;
		height:100upx;
		background: $uni-color-primary;
		line-height: 100upx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100upx;
		border-radius: 50upx;
	}
	.input-item{
		position: relative;
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30upx;
		background:$page-color-light;
		height: 120upx;
		border-radius: 5px;
		margin-bottom: 30upx;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}
		input{
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}	
		.ion-img{
			width: 35upx;
			height: 35upx;
			position: absolute;
			bottom:24upx;
			right: 20upx;
		}
	}
</style>
